<!--
 * @FilePath: \plugWeb\src\components\VueEditor.vue
 * @Version: 2.0
 * @LastEditors: lhl
 * @LastEditTime: 2022-02-07 10:56:04
 * @Description: 
-->
<template>
  <div id="editor">
    <div id="toolbar-container"
         class="toolbar"></div>
    <p>------ 我是分割线 ------</p>
    <div id="text-container"
         class="text"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  data () {
    return {
      content: '测试'
    }
  },
  mounted () {
    const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
    editor.config.placeholder = '自定义 placeholder 提示文字'
    editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf']

    editor.create()
    const IDS = document.getElementById(editor.textElemId)
    editor.txt.html('<p>用 JS 设置的内容</p>')
    console.log(editor)
    IDS.addEventListener('paste', (e) => {
      const result = []
      const clipboardData =
        e.clipboardData ||
        (e.originalEvent && e.originalEvent.clipboardData) ||
        {}
      const items = clipboardData.items
      this.objForEach(items, function (key, value) {
        var type = value.type
        if (/image/i.test(type)) {
          result.push(value.getAsFile())
        }
      })

      // this.upload(result.shift(), '服务器地址').then((res) => {
      //   if (res.key) {
      //     const imgUrl = this.qiniuHost + res.key
      //     editor.cmd.do(
      //       'insertHtml',
      //       '<img src="' + imgUrl + '" style="max-width:100%;"/>'
      //     )
      //   }
      // })
    })
    console.log(IDS)
  },
  methods: {
    objForEach (obj, fn) {
      var key = void 0,
        result = void 0
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          result = fn.call(obj, key, obj[key])
          if (result === false) {
            break
          }
        }
      }
    }
  }
}
</script>

<style>
.ProseMirror {
  height: 100% !important;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  min-height: 400px;
}
</style>
